@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-black text-white;
    /* 移动端优化 */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
  
  /* 移动端触摸优化 */
  * {
    -webkit-tap-highlight-color: transparent;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none;
  }
  
  .btn-primary {
    @apply bg-red-500 text-white hover:bg-red-600;
  }
  
  .btn-secondary {
    @apply bg-gray-800 text-white hover:bg-gray-700;
  }
  
  .input {
    @apply flex h-10 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white placeholder-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
  }
  
  .card {
    @apply rounded-lg border border-gray-800 bg-gray-900 text-white shadow-sm;
  }
  
  /* 快手风格的卡片样式 */
  .kuaishou-card {
    @apply bg-gray-900 rounded-lg shadow-sm border border-gray-800 overflow-hidden;
  }
  
  /* 快手风格的按钮组 */
  .kuaishou-button-group {
    @apply flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2;
  }
  
  /* 快手风格的网格布局 */
  .kuaishou-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4;
  }
  
  /* 快手风格的间距 */
  .kuaishou-spacing {
    @apply px-4 py-4 md:px-6 md:py-6;
  }
  
  /* 快手风格的文本大小 */
  .kuaishou-text {
    @apply text-sm md:text-base text-white;
  }
  
  .kuaishou-text-lg {
    @apply text-lg md:text-xl text-white;
  }
  
  .kuaishou-text-xl {
    @apply text-xl md:text-2xl text-white;
  }
  
  /* 快手风格的触摸区域 */
  .touch-target {
    @apply min-h-[44px] min-w-[44px];
  }
  
  /* 快手风格的滚动容器 */
  .kuaishou-scroll {
    @apply overflow-x-auto overflow-y-hidden -mx-4 px-4;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .kuaishou-scroll::-webkit-scrollbar {
    display: none;
  }
  
  /* 快手风格的加载动画 */
  .kuaishou-loading {
    @apply flex items-center justify-center py-8;
  }
  
  .kuaishou-loading-spinner {
    @apply animate-spin rounded-full h-8 w-8 md:h-12 md:w-12 border-b-2 border-red-500;
  }
  
  /* 快手风格的空状态 */
  .kuaishou-empty {
    @apply text-center py-8 px-4;
  }
  
  .kuaishou-empty-icon {
    @apply text-4xl md:text-6xl mb-4;
  }
  
  .kuaishou-empty-title {
    @apply text-lg md:text-xl font-medium text-white mb-2;
  }
  
  .kuaishou-empty-description {
    @apply text-gray-400 mb-4;
  }
  
  /* 快手风格的视频播放器 */
  .kuaishou-video {
    @apply w-full h-full object-cover;
  }
  
  /* 快手风格的操作按钮 */
  .kuaishou-action-button {
    @apply w-12 h-12 bg-black bg-opacity-30 rounded-full flex items-center justify-center hover:bg-opacity-50 transition-all duration-200;
  }
  
  /* 快手风格的渐变按钮 */
  .kuaishou-gradient-button {
    @apply bg-gradient-to-r from-red-500 to-pink-500 text-white rounded-full flex items-center justify-center hover:from-red-600 hover:to-pink-600 transition-all duration-200;
  }
}

/* 快手风格的工具类 */
@layer utilities {
  /* 安全区域适配 */
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }
  
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .safe-area-left {
    padding-left: env(safe-area-inset-left);
  }
  
  .safe-area-right {
    padding-right: env(safe-area-inset-right);
  }
  
  /* 快手风格的阴影 */
  .kuaishou-shadow {
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.5);
  }
  
  /* 快手风格的圆角 */
  .kuaishou-rounded {
    border-radius: 12px;
  }
  
  /* 快手风格的过渡 */
  .kuaishou-transition {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* 快手风格的文本渐变 */
  .kuaishou-text-gradient {
    background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
} 